import styled from "styled-components";

export const VideoStyle = styled.div`
  .mv-video {
    width: 640px;
    height: 360px;
    background-color: #000000;
    position: relative;
    video {
      position: absolute;
    }
    .remakeIcn {
      background: url(${require("@/assets/img/remake.png").default}) no-repeat 0
        9999px;
    }
    .playIcn {
      background: url(${require("@/assets/img/bfb.png").default}) no-repeat 0
        9999px;
    }
    .icn {
      position: absolute;
      width: 75px;
      height: 74px;
      display: block;
      background-position: center center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 1000;
      :hover {
        color: #fff;
      }
    }
    .mv-cover {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      font-size: 12px;
      line-height: 1.42857;
      color: #fff;
      overflow: hidden;
      .maska {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        cursor: default;
      }
      .remake {
        display: none;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        cursor: default;
      }
      .mv-controls {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 42px;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        z-index: 999;
        .mv-controls-left {
          margin-right: 10px;
          ::after {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
          }
          .time {
            height: 34px;
            margin: 0;
            line-height: 34px;
            color: rgba(255, 255, 255, 0.5);
          }
          .playClk {
            float: left;
            width: 34px;
            height: 32px;
            margin: 0 6px;
            background: url(${require("@/assets/img/play1.png").default})
              no-repeat center center;
            cursor: pointer;
          }
          .paused {
            float: left;
            width: 34px;
            height: 32px;
            margin: 0 6px;
            background: url(${require("@/assets/img/pause.png").default})
              no-repeat center center;
            cursor: pointer;
          }
        }
        .mv-controls-middle {
          flex: 1;
          position: relative;
          height: 34px;
          z-index: 9999;
          .progress {
            position: absolute;
            height: 4px;
            border-radius: 2px;
            background-color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            top: 15px;
            width: 100%;
          }
          .play-progress {
            width: 0%;
            background-color: #b2072a;
            .hk {
              position: absolute;
              top: -10px;
              right: -12px;
              display: block;
              width: 24px;
              height: 24px;
              background: url(${require("@/assets/img/hk.png").default})
                no-repeat center;
            }
          }
        }
        .mv-controls-right {
          margin-left: 10px;
          .duration-time {
            float: left;
            height: 34px;
            margin: 0;
            line-height: 34px;
            color: rgba(255, 255, 255, 0.5);
          }
          .volume {
            position: relative;
            margin-left: 10px;
            margin-right: 1px;
            padding: 10px 10px;
            float: left;
            :hover {
              .volume-controls {
                display: block;
              }
              .allow {
                display: block;
              }
            }
            .volume-icon {
              display: inline-block;
              width: 16px;
              height: 12px;
              background: url(${require("@/assets/img/volume.png").default})
                no-repeat;
              cursor: pointer;
            }
            .volume-controls {
              display: none;
              position: absolute;
              top: -2px;
              left: 6px;
              width: 22px;
              height: 86px;
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-bottom: none;
              background: rgba(0, 0, 0, 0.7);
              -ms-transform: translateY(-100%);
              transform: translateY(-100%);
              :hover {
                display: block;
              }
              .volume-silder {
                position: relative;
                width: 4px;
                height: 70px;
                margin: 6px 9px;
                border-radius: 2px;
                background-color: rgba(255, 255, 255, 0.2);
                :hover {
                  cursor: pointer;
                }
                .volume-out {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  background: #b2072a;
                  border-radius: 2px;
                  height: 1%;
                  .dot {
                    cursor: pointer;
                    position: absolute;
                    top: -8px;
                    left: -8px;
                    display: block;
                    width: 18px;
                    height: 18px;
                    background: url(${require("@/assets/img/dot.png").default})
                      no-repeat center;
                  }
                }
              }
            }
            .allow {
              display: none;
              position: absolute;
              top: -2px;
              bottom: -7px;
              left: 0;
              right: auto;
              width: 100%;
              height: 7px;
              background: url(${require("@/assets/img/xx.png").default})
                no-repeat 0 9999px;
              background-position: center top;
              cursor: default;
              :hover {
                display: block;
              }
            }
          }
          .brs {
            :hover {
              .brs-check {
                display: block;
              }
            }
            ::before {
              content: "";
              position: absolute;
              top: 9px;
              display: block;
              width: 1px;
              height: 100%;
              background: rgba(255, 255, 255, 0.2);
            }
            ::after {
              content: "";
              position: absolute;
              top: 9px;
              right: 0;
              display: block;
              width: 1px;
              height: 100%;
              background: rgba(255, 255, 255, 0.2);
            }
            float: left;
            position: relative;
            width: 50px;
            height: 17px;
            padding-top: 9px;
            z-index: 3;
            .brs-check {
              position: absolute;
              display: none;
              top: -6px;
              left: -8px;
              width: 66px;
              box-sizing: border-box;
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-bottom: none;
              background: rgba(0, 0, 0, 0.7);
              -ms-transform: translateY(-100%);
              transform: translateY(-100%);
              :hover {
                display: block;
              }
              .itm {
                position: relative;
                height: 26px;
                padding: 0;
                line-height: 26px;
                border: none;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                cursor: pointer;
                .label {
                  position: relative;
                  display: block;
                  width: 100%;
                  height: 100%;
                  padding: 0 10px 0 18px;
                  box-sizing: border-box;
                  text-align: justify;
                  overflow: hidden;
                }
                .ffull {
                  position: absolute;
                  display: block;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(255, 255, 255, 0);
                }
                :hover {
                  background: rgba(255, 255, 255, 0.2);
                }
              }
              .schec {
                border-top-color: transparent;
                background: rgba(255, 255, 255, 0.2);
                ::before {
                  content: "";
                  position: absolute;
                  top: 9px;
                  left: 4px;
                  display: block;
                  width: 10px;
                  height: 8px;
                  background: url(${require("@/assets/img/gou.png").default})
                    no-repeat center;
                }
              }
              .arrow {
                display: block;
                position: absolute;
                top: auto;
                bottom: -7px;
                left: 0;
                right: auto;
                width: 100%;
                height: 7px;
                background: url(${require("@/assets/img/xxjt.png").default})
                  no-repeat;
                background-position: center top;
                cursor: default;
              }
            }
            .current {
              line-height: 17px;
              text-align: center;
              color: rgba(255, 255, 255, 0.5);
              cursor: default;
              .v-label {
                line-height: 17px;
                text-align: center;
                color: rgba(255, 255, 255, 0.5);
                cursor: default;
                font-size: 12px;
              }
            }
          }
          .full {
            display: block;
            width: 34px;
            height: 34px;
            float: left;
            background: url(${require("@/assets/img/full.png").default})
              no-repeat center center;
            :hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
`;
